<template>
	<view class="jobDetailPage">
		<view class="jobCard  mL15 mR15">
			<view class="jobName u-3     line40">
				<text class="font20 bold">{{info?.oddJobName}}</text>
				<u-tag :text="info?.izUrgentText" bg-color="#fff" class="jpTag" :color="'#FF0000'" :border-color="'#FF0000'"  v-show="info?.izUrgent==1"/>
				<u-tag v-if="info?.recruitmentCarefree&&info?.recruitmentCarefree.indexOf('10')>=0" text="用工无忧"
					bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'" />
			</view>
			<view class="flex alg-center mT5 flex-wrap">
				<view class="jobTime">{{info?.jobBeginDatetime}}-{{info?.jobEndDatetime}}</view>
				<view class="jobTime">{{info?.salaryPaymentText}}</view>
				<view class="jobTime">招{{info?.oddJobUseNum}}人</view>
			</view>
			<view class="flex jst-between alg-center mT10">
				<view class="">
					<text class="font24 u-red bold">{{info?.salary}}</text>
					<text class="u-red font14 bold">元</text>
				</view>
			<!-- 	<view class="font13 ua">
					发布于{{info?.timediffStr}}
				</view> -->
			</view>
			<view class="posBox pT10 mT10">
				<view class="flex alg-center jst-between ">
					<view class="u-8bd font13  w80 flex mR5">
						<image class="posImg" :src="resources.posIcon" mode=""></image>
						<text style="width: calc(100% - 46rpx);">{{info?.hopeWorkAddress}}</text>
					</view>
					<view class="u-6 font13">
						{{info?.distance}}
					</view>
				</view>
			</view>

		</view>

		<view class="mL15 mR15 mT15">
			<view class="u-3 font18 bold mB15">职位要求</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="font13 u-9">用工工期</view>
				<view class="u-3 font15 mT5">{{info?.jobBeginTime}}~{{info?.jobEndTime}}</view>
				<view class="font13 u-9 mT10">工作时间</view>
				<view class="u-3 font15 mT5">{{info?.jobBeginDatetime}}-{{info?.jobEndDatetime}}</view>
				<view class="font13 u-9 mT10">自带工具</view>
				<view class="u-3 font15 mT5">{{info?.izToolsText}}</view>
				<view class="font13 u-9 mT10">工作方式</view>
				<view class="u-3 font15 mT5">{{info?.workWayText}}</view>
			</view>
		</view>
		<view class="mL15 mR15 mT15">
			<view class="u-3 font18 bold mB15">职位详情</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="font15 u-3 line32">
					{{info?.oddJobDescribe}}
				</view>
			</view>
		</view>
		<view class="mL15 mR15 mT15" v-if="info?.incrementServerVo&&info?.incrementServerVo.length>0">
			<view class="u-3 font18 bold mB15">用工保障金额</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="flex jst-between alg-center mB10" v-for="(item,i) in info?.incrementServerVo" :key="'bz'+i">
					<text class="font15">{{item.detailsText}}</text>
					<text class="font15 bold">￥{{item.quota}}元</text>
				</view>
				<view class="flex jst-end  mT15 u-border-top pT15">
					<view class="">
						<text class="font14">合计金额：</text>
						<text class="bold font18 u-red">{{info?.totalSalary||0}}元</text>
						
					</view>
					
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {getCompanyJobDetail} from '@/api/companyInterface/user.js'
	import {
		getXy
	} from "@/api/userInterface/user.js"
	import {
		getLocal
	} from "@/libs/map.js"
	export default {
		components: {

		},
		data() {
			return {
				loading: false,
				id: null,
				showModal: false,
				info: null,
				tx: null
			};
		},
		onLoad(e) {
			this.jobId = e.id;
			this.getDetail(this.jobId)
		},
		methods: {
			async getDetail(id) {
			  const {lat,lon} = await this.xf.getLatOrLon()
				getCompanyJobDetail({
					infoId: id,
					latitude:lat,
					longitude: lon
				}).then(res => {
					this.info = res.result
				})
			},
			jumpOpenCompany() {
				uni.navigateTo({
					url: `/pages/common/personOrcompnayInfo/index?id=${this.info.id}&isPerson=${this.info?.oddReleaseType}`
				})
			},
			phoneLink() {
				getPhone({
					details: "10",
					acquirerId:this.info?.id
				}).then(res => {
					console.log(res)
				})
				// this.showModal = true;
			}

		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		/* #ifdef MP-COMPANY */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
		/* #endif */
		/* #ifdef MP-ECONOMIC  */
		background: linear-gradient(0deg, #F8FAFF, #EBFCFF);
		/* #endif */
	}
</style>
<style scoped lang="scss">
	.jobDetailPage{
		padding-bottom: 100rpx;
	}
	.jgGs {
		border-bottom: 2rpx solid #F6F6F6;
	}

	.rightImg {
		width: 9rpx;
		height: 18rpx;
	}

	.phoneImg {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
	}
	.posBox {
		border-top: 2rpx solid #F6F6F6;
	}

	.companyInfo {
		width: calc(100% - 110rpx);
	}

	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
			margin-top: 16rpx;
		}

		.jobTag {
			margin-top: 16rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			height: 44rpx;
			line-height: 44rpx;
			margin-right: 10rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>